<nav id="sidebar" class="sidebar" role="navigation">
    <!-- need this .js class to initiate slimscroll -->
    <div class="js-sidebar-content">
        <header class="logo hidden-sm-down"></header>
        <!-- main notification links are placed inside of .sidebar-nav -->
        <ul class="sidebar-nav">
            <li ng-class="{active:sidebar.active, open:!sidebar.collapsed}" ng-repeat="sidebar in sidebars" >
                <a ng-class="{collapsed:sidebar.collapsed}" ng-click="toggle(sidebar.name)" href="">
                    <span class="icon">
                        <i class="{{sidebar.icon}}"></i>
                    </span> {{sidebar.name}}
                    <i class="toggle fa fa-angle-down"></i>
                </a>
                <ul ng-class="{collapse:true, in:!sidebar.collapsed}">
                    <li ng-repeat="child in sidebar.children" ui-sref-active="active" ng-click="toggleParentStatus(sidebar.name)"><a ui-sref="{{child.href}}">{{child.name}}</a></li>
                </ul>
            </li>
            
        </ul>
    </div>
</nav>
<nav class="page-controls navbar navbar-default">
    <div class="container-fluid">
        <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav pull-right" ng-click="$event.preventDefault()">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle dropdown-toggle-notifications" id="notifications-dropdown-toggle" data-toggle="dropdown">
                        <span class="thumb-sm avatar pull-sm-left">
                           <i class="fa fa-user"></i>
                        </span> &nbsp; <strong>{{"Admin"}}</strong>&nbsp;&nbsp;
                    </a>
                </li>
                <li class="nav-item dropdown">
                    <a href class="nav-link dropdown-toggle" data-toggle="dropdown">
                        <i class="fa fa-cog fa-lg"></i>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li><a class="dropdown-item"><i class="fa fa-user"></i> &nbsp; My Account</a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item"><i class="fa fa-pencil"></i> &nbsp; Reset Password</a></li>
                        <li class="dropdown-divider"></li>
                        <li><a class="dropdown-item"><i class="fa fa-sign-out"></i> &nbsp; Log Out</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<div class="content-wrap">
    <!-- main page content. the place to put widgets in. usually consists of .row > .col-md-* > .widget.  -->
    <main class="content view-animate fade-up" name="main" ui-view ></main>
    <!--  <div class="loading hide">
       <img src="assets/images/loading.gif" width="60" height="60">
    </div> -->
</div>
